<template>
    <el-container class="home-container">
        <!-- 头部 -->
    <el-header>
        <div>
            <img src="../../assets/img/logo.png" alt="">
            <span>电商后台管理系统</span>
        </div>
        <el-button type="info" @click="logout">退出</el-button>
    </el-header>
    <el-container>
         <!-- 左边 -->
        <el-aside :width="isCollapse?'64px':'200px'">
            <div class="toggleButton" @click="toggleBtn"> | | | </div>
            <!-- unique-opened保留一个菜单打开 -->
            <el-menu
            :default-active='isActive'
            unique-opened
            :collapse='isCollapse'
            :collapse-transition='false'
            router
            class="el-menu-vertical-demo"
            background-color="#333744"
            text-color="#fff"
            active-text-color="#409EFF">
            <!-- 一级菜单 -->
            <el-submenu :index="item.id+''" v-for="item in asideList" :key="item.id">
                <!-- 一级菜单模板区域 -->
                <template slot="title">
                    <!-- 图标 -->
                <i :class="asideObj[item.id]"></i>
                 <!-- 文本 -->
                <span>{{item.authName}}</span>
                </template>
                <!-- 二级菜单 -->
                <el-menu-item :index="'/'+item2.path" v-for="item2 in item.children" :key="item2.id" @click="seveNavState('/'+item2.path)">
                    <!-- 二级菜单模板 -->
                 <template slot="title">
                    <!-- 图标 -->
                <i class="el-icon-menu"></i>
                 <!-- 文本 -->
                <span>{{item2.authName}}</span>
                </template>
                </el-menu-item>

            </el-submenu>
            </el-menu>
        </el-aside>
         <!-- 右边 -->
        <el-main>
            <router-view></router-view>
        </el-main>
    </el-container>
    </el-container>
</template>

<script>
export default {
    data () {
        return {
            //左侧列表数据
            asideList:[],
            //自定义图标对象
            asideObj:{
                '125':'el-icon-s-custom',
                '103':'el-icon-lock',
                '101':'el-icon-s-goods',
                '102':'el-icon-s-order',
                '145':'el-icon-s-marketing'
            },
            //默认不折叠
            isCollapse:false,
            //默认激活谁
            isActive:''
        }
    },
    created () {
      this.getaside()
       this.isActive = window.sessionStorage.getItem('active')
    },
    methods:{
        logout () {
            window.sessionStorage.clear()
            this.$router.push('/login')
        },
        // 获取所以菜单数据
       async getaside () {
            const res = await this.$http.get('menus')
            if(res.data.meta.status==!200) {
                  return this.$message.error('获取菜单失败');
            }else{
                 this.asideList = res.data.data
                console.log(this.asideList)
            }  
        },
        //折叠导航
        toggleBtn(){
           this.isCollapse = !this.isCollapse
        },
        //保存链接的激活状态
        seveNavState(active){
           window.sessionStorage.setItem('active',active)
           this.isActive = active
        }
    }
}
</script>

<style lang="less" scoped>
    .home-container{
        height: 100%;
    }
    .el-header{
        background: #373d41;
        display: flex;
        justify-content: space-between;
        padding-left: 0;
        align-items: center;
        >div{
            display: flex;
            align-items: center;
            img{
                width: 60px;
                height: 60px;
            }
            span{
              color: #ffffff;
              font-size: 20px;
              font-weight: 600;
              margin-left: 20px;
            }
        }
    }

    .el-aside{
        background: #333744;
        height: 100%;
        .el-menu{
            border: none;
        }
        .toggleButton{
            color: #ffffff;
            flex-wrap: 600;
            font-size: 10px;
            background: #4a5064;
            height: 24px;
            text-align: center;
            line-height: 24px;
            cursor: pointer;
        }
    }

    .el-main{
        background:#eaedf1 ;
    }
</style>